<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>艾家艾产品线上销售平台</title>
	<link rel="shortcut icon" href="../img/favicon.ico">
	<link rel="stylesheet" href="../css/reset.css" />
	<link rel="stylesheet" href="../css/commodityDetils.css" />
	<script src="../them/jquery/jquery-1.7.2.js"></script>
	<script src="../them/jquery/jquery.cookie.js"></script>
</head>
<body>
	<!--头部-->
	<div class="site-topbar">
	    <div class="container">
	        <div class="topbar-nav">
				<a href="javascript:;">在线客服</a>
				<a href="javascript:;">艾百科</a>
				<a href="javascript:;">养生百科</a>
				<a href="javascript:;">艾家商城移动版</a>
	        </div>
	        <div class="topbar-cart">
	            <a href="javascript:;" class="cart-mini">
	                <span class="cart"></span>
	                <span>购物车</span>
					<span class="gwc_number"></span>
	            </a>
	        </div>
	        <div class="topbar-info">
				<div class="login" style="display: inline-block">
					<a href="login.html">登录</a>
					<a href="register.html">注册</a>
				</div>
	            <a href="javascript:;">消息通知</a>

	        </div>
	    </div>
	</div>
	<!--导航-->
	<div class="site-header">
	    <div class="container">
	        <div class="header-logo">
	            <a href="index.html">
	                <span class="logo"></span>
	            </a>
	        </div>
			<div class="header-nav">
				<ul class="nav-list">
					<li class="nav-item">
						<a href="javacsript:;" class="link">
							<span>艾灸</span>
						</a>
						<div class="header-nav-menu">
							<div class="container">
								<ul class="children-list clearfix">
									<li style="border-left: 0">
										<div class="figure figure-thumb">
											<a href="javascript:;">
												<img src="http://192.168.31.3:18089/z1.jpg" >
												<p class="tittle">景德镇艾灸礼包</p>
												<p class="price">999元</p>
											</a>
										</div>
									</li>
									<li>
										<div class="figure figure-thumb">
											<a href="javascript:;">
												<img src="http://192.168.31.3:18089/z2.jpg" >
												<p class="tittle">独家艾灸</p>
												<p class="price">999元</p>
											</a>
										</div>
									</li>
									<li>
										<div class="figure figure-thumb">
											<a href="javascript:;">
												<img src="http://192.168.31.3:18089/z3.jpg" >
												<p class="tittle">顶级艾灸</p>
												<p class="price">999元</p>
											</a>
										</div>
									</li>
									<li>
										<div class="figure figure-thumb">
											<a href="javascript:;">
												<img src="http://192.168.31.3:18089/z4.jpg" >
												<p class="tittle">多功能艾灸床</p>
												<p class="price">999元</p>
											</a>
										</div>
									</li>
								</ul>
							</div>
						</div>
					</li>
					<li class="nav-item">
						<a href="javacsript:;" class="link">
							<span>设备</span>
						</a>
						<div class="header-nav-menu">
							<div class="container">
								<ul class="children-list clearfix">
									<li style="border-left: 0">
										<div class="figure figure-thumb">
											<a href="javascript:;">
												<img src="http://192.168.31.3:18089/zb1.jpg" >
												<p class="tittle">推拿仪</p>
												<p class="price">999元</p>
											</a>
										</div>
									</li>
									<li>
										<div class="figure figure-thumb">
											<a href="javascript:;">
												<img src="http://192.168.31.3:18089/aj1.jpg" >
												<p class="tittle">艾香</p>
												<p class="price">999元</p>
											</a>
										</div>
									</li>
									<li>
										<div class="figure figure-thumb">
											<a href="javascript:;">
												<img src="http://192.168.31.3:18089/cx1.jpg" >
												<p class="tittle">艾灸盒</p>
												<p class="price">999元</p>
											</a>
										</div>
									</li>

								</ul>
							</div>
						</div>
					</li>
					<li class="nav-item">
						<a href="javacsript:;" class="link">
							<span>艾柱</span>
						</a>
						<div class="header-nav-menu">
							<div class="container">
								<ul class="children-list clearfix">
									<li style="border-left: 0">
										<div class="figure figure-thumb">
											<a href="javascript:;">
												<img src="http://192.168.31.3:18089/LH2.jpg" >
												<p class="tittle">艾柱贴</p>
												<p class="price">899元</p>
											</a>
										</div>
									</li>
								</ul>
							</div>
						</div>
					</li>
					<li class="nav-item">
						<a href="javacsript:;" class="link">
							<span>文化</span>
						</a>
						<div class="header-nav-menu">
							<div class="container">
								<ul class="children-list clearfix">
									<li style="border-left: 0">
										<div class="figure figure-thumb">
											<a href="javascript:;">
												<img src="http://192.168.31.3:18089/LH3.jpg" >
												<p class="tittle">传艾图</p>
												<p class="price">1999元</p>
											</a>
										</div>
									</li>
									<li>
										<div class="figure figure-thumb">
											<a href="javascript:;">
												<img src="http://192.168.31.3:18089/sj1.jpg" >
												<p class="tittle">艾草书</p>
												<p class="price">99元</p>
											</a>
										</div>
									</li>
									<li>
										<div class="figure figure-thumb">
											<a href="javascript:;">
												<img src="http://192.168.31.3:18089/sj4.jpg" >
												<p class="tittle">艾灸百科</p>
												<p class="price">99元</p>
											</a>
										</div>
									</li>

								</ul>
							</div>
						</div>
					</li>
				</ul>
			</div>
	        <div class="header-search">
	            <form class="search-form clearfix" method="get">
	                <input class="search-text" type="search" name="keyword" autocomplete="off">
	                <input type="submit" class="search-btn" value=" ">

	                <div class="search-hot-words">
	                    <a href="javasctipy:;">红米Note4X</a>
	                    <a href="javascript:;">红米4X</a>
	                </div>
	                <div class="keyword-list hide">
	                    <ul class="result-list"></ul>
	                </div>
	            </form>
	        </div>
	    </div>
	</div>
	<div id="conetent_wrapper">
		<div id="content">
			<div class="commodity clearfix">
				<div class="commodity_left fl">
					<div class="commodity_img">
						<img id="commodity_img" src="" alt="">
						<span></span>
						<div class="commodity_img_b">
							<img id="commodity_img_b" src="" alt="">
						</div>
					</div>
					<div class="img_nav">
						<a href="javascript:;" class="price"></a>
						<div class="img_btn_box">
							<ul class="btn_box .clearfix">
								
							</ul>
						</div>
						<a href="javascript:;" class="next"></a>
					</div>
				</div>
				<div class="commodity_right fl">
					<div class="commodity_title">
						<p class="commodity_name"></p>
						<p class="commodity_privilege"></p>
					</div>
					<div class="details">
						<p class="newPrice">
							现&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;价：<span></span>
						</p>

						<ul class="details_details">
							<li class="details_item">
								服&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;务：<span>由华为商城负责发货，并提供售后服务</span>
							</li>
							<li class="details_item">
								支&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;持：<span class="services"></span>
							</li>
							
						</ul>
					</div>
					<ul class="buy_option">
						<!--<li class="buy_option_item">-->
							<!--月&nbsp;销&nbsp;&nbsp;量：<span style="color: #e01d20" class="saleCount"></span>-->
						<!--</li>-->
						<!--<li class="buy_option_item">-->
							<!--累计评价：<span class="commentCount" style="color: #e01d20"></span>-->
						<!--</li>-->
						<li class="buy_option_item">
							库&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;存：<span class="stock"></span>件
						</li>
					</ul>
					<div class="buy_content_box clearfix">
						<span  class="buy_text fl">购买数量：</span>
						<span class="buy_reduce fl">-</span>
						<span class="buy_count fl">0</span>
						<span class="buy_add fl">+</span>
					</div>
					<div class="buy_btn_box clearfix">
						<p class="buy_btn fl">立即购买</p>
						<p class="shopping_cart fl">加入购物车</p>
					</div>
				</div>
			</div>
			<div class="commodity_details clearfix">
				<div class="commodity_details_left fl">
					<div class="hot_singles">
						<p class="hot_singles_title">热销榜单</p>
						<ul>
							<li class="hot_singles_item clearfix">
								<p class="fl top_img">
									<img src="../../img/top.jpg" alt="">
								</p>
								<div class="fl top_text">
									荣耀V9 全网通尊享版 6GB+128GB（极光蓝）
									<p class="top_price">￥3499</p>
								</div>
								<p class="top_content"></p>
							</li>
							<li class="hot_singles_item clearfix">
								<p class="fl top_img">
									<img src="../../img/top.jpg" alt="">
								</p>
								<div class="fl top_text">
									荣耀V9 全网通尊享版 6GB+128GB（极光蓝）
									<p class="top_price">￥3499</p>
								</div>
								<p class="top_content"></p>
							</li>
							<li class="hot_singles_item clearfix">
								<p class="fl top_img">
									<img src="../../img/top.jpg" alt="">
								</p>
								<div class="fl top_text">
									荣耀V9 全网通尊享版 6GB+128GB（极光蓝）
									<p class="top_price">￥3499</p>
								</div>
								<p class="top_content"></p>
							</li>
							<li class="hot_singles_item clearfix">
								<p class="fl top_img">
									<img src="../../img/top.jpg" alt="">
								</p>
								<div class="fl top_text">
									荣耀V9 全网通尊享版 6GB+128GB（极光蓝）
									<p class="top_price">￥3499</p>
								</div>
								<p class="top_content"></p>
							</li>
							<li class="hot_singles_item clearfix">
								<p class="fl top_img">
									<img src="../../img/top.jpg" alt="">
								</p>
								<div class="fl top_text">
									荣耀V9 全网通尊享版 6GB+128GB（极光蓝）
									<p class="top_price">￥3499</p>
								</div>
								<p class="top_content"></p>
							</li>
							<li class="hot_singles_item clearfix">
								<p class="fl top_img">
									<img src="../../img/top.jpg" alt="">
								</p>
								<div class="fl top_text">
									荣耀V9 全网通尊享版 6GB+128GB（极光蓝）
									<p class="top_price">￥3499</p>
								</div>
								<p class="top_content"></p>
							</li>
						</ul>
					</div>
				</div>
				<div class="commodity_details_right fl">
					<div class="commodity_nav_border">
						<ul class="commodity_nav_box clearfix">
							<li class="commodity_nav_item fl commodity_nav_item_active">商品详情</li>
							<li class="commodity_nav_item fl">用户评价</li>
						</ul>
					</div>
					<div class="commodity_nav_div">
						<div class="commodity_nav_details">

						</div>
						<div style="display: none" class="commodity_nav_appraise">
							<div class="appraise_title clearfix">	
								<div class="fl appraise_title_item">
									<div class="appraise_scale">
										97%
									</div>
									<div class="appraise_scale_text">
										好评度
									</div>
								</div>
								<div class="fl effect">
									<div class="fl effect_title">买家印象：</div>
									<ul class="fl effect_item_box">
										<li>性价比高(47456)</li>
										<li>物流给力(40648)</li>
										<li>精美(14884)</li>
										<li>物美价廉(33705)</li>
										<li>性价比高(47456)</li>
										<li>物流给力(40648)</li>
										<li>精美(14884)</li>
										<li>物美价廉(33705)</li>
									</ul>
								</div>
							</div>
							<ul class="appraise_list">
								<li class="appraise_list_item clearfix">
									<div class="fl user">
										<div class="user_img_box">
											<img src="https://res.vmallres.com/20170502/images/echannel/misc/defaultface_user_small.png" alt="">
											<span class="grade"></span>
										</div>
										<p>1**22</p>
									</div>
									<div class="fl user_appraise">
										<div class="user_appraise_t">
											<div class="star fl"></div>
											<ul class="fl">
												<li class="fl label">物美价廉</li>
												<li class="fl label">物美价廉</li>
												<li class="fl label">物美价廉</li>
												<li class="fl label">物美价廉</li>
												<li class="fl label">物美价廉</li>
											</ul>
										</div>
										<div class="user_appraise_b">
											花不解语花颔首
										</div>
									</div>
								</li>
								<li class="appraise_list_item clearfix">
									<div class="fl user">
										<div class="user_img_box">
											<img src="https://res.vmallres.com/20170502/images/echannel/misc/defaultface_user_small.png" alt="">
											<span class="grade"></span>
										</div>
										<p>1**22</p>
									</div>
									<div class="fl user_appraise">
										<div class="user_appraise_t">
											<div class="star fl"></div>
											<ul class="fl">
												<li class="fl label">物美价廉</li>
												<li class="fl label">物美价廉</li>
												<li class="fl label">物美价廉</li>
												<li class="fl label">物美价廉</li>
												<li class="fl label">物美价廉</li>
											</ul>
										</div>
										<div class="user_appraise_b">
											花不解语花颔首
										</div>
									</div>
								</li>
								<li class="appraise_list_item clearfix">
									<div class="fl user">
										<div class="user_img_box">
											<img src="https://res.vmallres.com/20170502/images/echannel/misc/defaultface_user_small.png" alt="">
											<span class="grade"></span>
										</div>
										<p>1**22</p>
									</div>
									<div class="fl user_appraise">
										<div class="user_appraise_t">
											<div class="star fl"></div>
											<ul class="fl">
												<li class="fl label">物美价廉</li>
												<li class="fl label">物美价廉</li>
												<li class="fl label">物美价廉</li>
												<li class="fl label">物美价廉</li>
												<li class="fl label">物美价廉</li>
											</ul>
										</div>
										<div class="user_appraise_b">
											花不解语花颔首
										</div>
									</div>
								</li>
								<li class="appraise_list_item clearfix">
									<div class="fl user">
										<div class="user_img_box">
											<img src="https://res.vmallres.com/20170502/images/echannel/misc/defaultface_user_small.png" alt="">
											<span class="grade"></span>
										</div>
										<p>1**22</p>
									</div>
									<div class="fl user_appraise">
										<div class="user_appraise_t">
											<div class="star fl"></div>
											<ul class="fl">
												<li class="fl label">物美价廉</li>
												<li class="fl label">物美价廉</li>
												<li class="fl label">物美价廉</li>
												<li class="fl label">物美价廉</li>
												<li class="fl label">物美价廉</li>
											</ul>
										</div>
										<div class="user_appraise_b">
											花不解语花颔首
										</div>
									</div>
								</li>
							</ul>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="footer">
		<div class="fuwu">
			<ul>
				<li>预约维修服务</li>
				<li>7天无理由退货</li>
				<li>15天免费换货</li>
				<li>满150元包邮</li>
				<li>520余家售后网点</li>
			</ul>
		</div>
		<div class="fuwu_det clearfix">
			<ul class="fl fuwu_det_item">
				<li class="fuwu_det_i fl">
					<p>帮助中心</p>
					<ul>
						<li>账户管理</li>
						<li>购物指南</li>
						<li>订单操作</li>
					</ul>
					
				</li>
				<li class="fuwu_det_i fl">
					<p>帮助中心</p>
					<ul>
						<li>账户管理</li>
						<li>购物指南</li>
						<li>订单操作</li>
					</ul>
				</li>
				<li class="fuwu_det_i fl">
					<p>帮助中心</p>
					<ul>
						<li>账户管理</li>
						<li>购物指南</li>
						<li>订单操作</li>
					</ul>
				</li>
				<li class="fuwu_det_i fl">
					<p>帮助中心</p>
					<ul>
						<li>账户管理</li>
						<li>购物指南</li>
						<li>订单操作</li>
					</ul>
				</li>
				<li class="fuwu_det_i fl">
					<p>帮助中心</p>
					<ul>
						<li>账户管理</li>
						<li>购物指南</li>
						<li>订单操作</li>
					</ul>
				</li>
				<li class="fuwu_det_i fl">
					<p>帮助中心</p>
					<ul>
						<li>账户管理</li>
						<li>购物指南</li>
						<li>订单操作</li>
					</ul>
				</li>
			</ul>
			<ul class="fl fuwu_det_tel">
				<li class="fuwu_det_num">400-100-5678</li>
				<li class="fuwu_det_time">周一至周日 8:00-18:00</li>
				<li class="fuwu_det_time">（仅收市话费）</li>
				<li class="fuwu_det_btn">24小时在线客服</li>
			</ul>
		</div>
		<div class="bottom clearfix">
			<div class="logo_b fl"></div>
			<div class="bottom_text fl">
				<ul>
					<li>艾家商城</li>
					<li>AiJia</li>
					<li>艾聊</li>
					<li>多看书城</li>
					<li>艾生活艾草</li>
					<li>艾疗</li>
					<li>艾家天猫店</li>
					<li>艾家淘宝直营店</li>
					<li>aijia.com</li>
				</ul>
				<p>aijia.com 京ICP证110507号 京ICP备10046444号 京公网安备11010802020134号 京网文[2014]0059-0009号</p>
				<p>违法和不良信息举报电话：185-0130-1238，本网站所列数据，除特殊说明，所有数据均出自我司实验室测试</p>
			</div>
			<div class="bottom_img fl">
				<img src="../../img/truste.png" alt="">
				<img src="../../img/v-logo-1.png" alt="">
				<img src="../../img/v-logo-2.png" alt="">
				<img src="../../img/v-logo-3.png" alt="">
			</div>
		</div>
	</div>
	
	<script>
		var _width=$(window).width();
		$('.header-nav-menu').css('width',_width);
		$('.header-nav-menu').css('left','-40px');

        //存储页面路径
        var str_path=window.location.pathname;
        var arr_path=str_path.split('/');
        var location_index=arr_path[arr_path.length-1];
        //alert(location_index);
        var cookietime = new Date();
        var date = new Date();
        cookietime.setTime(date.getTime() + (24 * 60 * 60 * 1000));
        $.cookie("location_index", location_index,{expires:cookietime});

		//购买数量
        var buycount=1;

		//创建页面
      function createPage(data){
		  var subImages=data.subImages;
		  var images=subImages.split(',');
		  var image=[];
          $.each(images,function(index,val){
              var _src=data.imageHost+val;
              image.push(_src);
		  });

      		$('#commodity_img').attr('src',image[0]);
			$('#commodity_img_b').attr('src',image[0]);
      		$('.commodity_name').html(data.name);
      		$('.newPrice span').html('￥'+data.price.toFixed(2));
      		$('.services').html(data.subtitle);
      		$('.stock').html(data.stock);
      		$('.commodity_privilege').html(data.subtitle);
          $('.buy_count').html(buycount);
      		$.each(image,function(index,val){
				$('.btn_box').append('<li class="img_btn fl "><img src="'+val+'" alt=""></li>');
			});
      		$('.img_btn').eq(0).addClass('img_btn_active');
			$('.btn_box').css('width',image.length*90-10+'px');

			var count=0;

			$('.img_btn').mouseover(function(){
				$('.img_btn').removeClass('img_btn_active');
				$(this).addClass('img_btn_active');
				$('#commodity_img').attr('src',image[$(this).index()]);
				$('#commodity_img_b').attr('src',image[$(this).index()]);
			});
			$('.next').click(function(){
				var oleft=$('.btn_box').width()-$('.img_btn_box').width();
				var nleft=$('.btn_box').position().left;
				if (-nleft>=oleft) {
					return;
				}
				count++;
				$('.btn_box').css('left',-88*count+'px');
			});
			$('.price').click(function(){
				count--;
				if(count<=0){
					count=0;
				}
				$('.btn_box').css('left',-88*count+'px');
			});
			$('.buy_reduce').click(function(){
				buycount--;
				if(buycount<=1){
					buycount=1;
				}
				$('.buy_count').html(buycount);
			});
			$('.buy_add').click(function(){
				buycount++;
				$('.buy_count').html(buycount);
			});
			$('.commodity_nav_item ').click(function(){
				$('.commodity_nav_item').removeClass('commodity_nav_item_active');
				$(this).addClass('commodity_nav_item_active');
				$('.commodity_nav_div > div').css('display','none');
				$('.commodity_nav_div > div').eq($(this).index()).css('display','block');
			});
			$('.commodity_nav_details').html(data.detail);

      }
	//请求商品信息
		var image=[];
		var good_det_id=$.cookie("good_det_id");

        $.ajax({
            url:'/product/detail.do',
            data:{
                'productId':good_det_id
            },
            type:'post',
            success:function(res){
				var data=res.data;
                createPage(data);
            },
            error:function(){

            }
        });
        //加入购物车
		$('.shopping_cart').click(function(){
            $.ajax({
                url:'/user/get_user_info.do',
                type:'post',
                success:function(res){
                    if(res.status){
                        window.location.href = "login.html";
                    }else{
                        $.ajax({
                            url:'/cart/add.do',
                            data:{
                                'count':buycount,
                                'productId':good_det_id
                            },
                            type:'post',
                            success:function(res){
                                alert('添加购物车成功');
                            },
                            error:function(){

                            }
                        });
                    }
                },
                error:function(){
                    alert('添加失败，请重新添加');
                }
            });
		});
		//购物车按钮
		$('.cart-mini').click(function(){
            $.cookie("location_index", "shopCart.html",{expires:cookietime});
            $.ajax({
                url:'/user/get_user_info.do',
                type:'post',
                success:function(res){
                    if(res.status){
                        window.location.href = "login.html";
                    }else{
                        window.location.href = "shopCart.html";
                    }
                },
                error:function(){
                    alert('添加失败，请重新添加');
                }
            });
        });
	</script>
	<script>
		//获取绝对定位
		function getPos(obj){
			var l=0;
			var t=0;
			while(obj.offsetParent){
				l+=obj.offsetLeft;
				t+=obj.offsetTop;
				obj=obj.offsetParent;
			}
			
			return {l:l,t:t};
		}
		var oS = document.getElementsByClassName('commodity_img')[0];
		var oSpan = oS.children[1];
		var oBox = document.getElementsByClassName('commodity_img_b')[0];
		var oImg = document.getElementById('commodity_img_b');

		// 当鼠标移入到small里面
		oS.onmouseenter = function(){
			// 让浮层和box出来
			oSpan.style.display = 'block';
			oBox.style.display = 'block';
		}
		oS.onmouseleave = function(){
			oSpan.style.display = 'none';
			oBox.style.display = 'none';
		}
		

		oS.onmousemove = function(ev){
			var oEvent = ev || event;
			var l = oEvent.clientX - oSpan.offsetWidth/2 -getPos(oS).l;
			var t = oEvent.clientY - oSpan.offsetHeight/2 -50;

			
			if(l <= 0){
				l = 0;
			}
			if(l >= oS.offsetWidth - oSpan.offsetWidth){
				l = oS.offsetWidth - oSpan.offsetWidth;
			}
			if(t <= 0){
				t = 0;
			}
			if(t >= oS.offsetHeight - oSpan.offsetHeight){
				t = oS.offsetHeight - oSpan.offsetHeight;
			}

			oSpan.style.left = l + 'px';
			oSpan.style.top = t + 'px';

			// 比例：
			oImg.style.left = -(oImg.offsetWidth-oBox.offsetWidth)*oSpan.offsetLeft/(oS.offsetWidth-oSpan.offsetWidth)+'px';
			oImg.style.top = -(oImg.offsetHeight-oBox.offsetHeight)*oSpan.offsetTop/(oS.offsetHeight-oSpan.offsetHeight)+'px';
		}
        //获取登录信息
        $.ajax({
            url:'/user/get_user_info.do',
            type:'post',
            success:function(result){
                if(!result.status){
                    $.ajax({
                        url: '/cart/get_cart_product_count.do',
                        type: 'post',
                        success: function (res) {
                            console.log(res.data);
                            $('.gwc_number').html('('+res.data+')');
                            $('.cart-mini').css('background','rgba(255, 103, 0,.7)');
                        }
                    });
                    var name=result.data.username;
                    $('.login').html('<a href="javascript:;">'+name+' , 您好！</a><div class="info_select"> <a href="personal-center.html">个人中心</a> <a href="user-favorite.html">我的喜欢</a> <a href="javascript:;" class="changeInfo">修改信息</a><a href="javascript:;" class="quit">退出登录</a> </div>');
                    $('.quit').click(function(){
                        $.ajax({
                            url:'/user/logout.do',
                            type:'post',
                            success:function(result){
                                if(!result.status){

                                    $('.hint').html('');
                                    window.location.href='index.html';
                                }
                            }
                        });
                    });
                    $('.changeInfo').click(function(){
                        window.location.href='change-information.html';
                    });
                }
            }
        });
		
	</script>

</body>
</html>